<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建文章</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/body.css">
    <link rel="stylesheet" href="../css/create-post.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.3/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.3/dist/sweetalert2.all.min.js"></script>
</head>

<body>
    <main class="create-post-container">
        <div class="create-post-header">
            <h1>创建新文章</h1>
            <button type="button" class="back-btn" onclick="window.location.href='blog.html'">
                <i class="fas fa-arrow-left"></i> 返回博客列表
            </button>
        </div>
        <form id="postForm" class="post-form" enctype="multipart/form-data">
            <div class="form-group">
                <label for="title">文章标题</label>
                <input type="text" id="title" name="title" required placeholder="请输入文章标题">
            </div>

            <div class="form-group">
                <label for="cover">文章封面</label>
                <div class="cover-upload">
                    <input type="file" id="cover" name="cover" accept="image/*" style="display: none;">
                    <div class="cover-preview" id="coverPreview">
                        <div class="upload-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>点击上传封面</span>
                            <div class="upload-tip">支持 jpg、png 格式，最大 20MB</div>
                        </div>
                        <img id="previewImage" src="" alt="" style="display: none;">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="markdown-editor">文章内容</label>
                <textarea id="markdown-editor" name="content"></textarea>
            </div>

            <div class="form-actions">
                <button type="submit" class="submit-btn">
                    <i class="fas fa-paper-plane"></i> 发布文章
                </button>
            </div>
        </form>
    </main>

    <script src="../js/nav.js"></script>
    <script src="../js/utils/axios.min.js"></script>
    <script src="../js/utils/easymde.min.js"></script>
    <script src="../js/utils/highlight.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/createPost.js"></script>
</body>

</html>